<template>
    <div class="todo">
        <h1>TODO</h1>
        <div class="todo-body">
            <todo-input></todo-input>
            <todo-show></todo-show>
        </div>
    </div>
</template>

<script>
import TodoInput from './TodoInput.vue';
import TodoShow  from './TodoShow.vue';

export default {
    name: 'todo',
    mounted: function () {
        this.$store.dispatch('initTodo');
    },
    components: {
        TodoInput,
        TodoShow
    }
}
</script>

<style lang="less">
.todo {
    display: inline-block;
    cursor: default;
}

.todo-body {
    max-width: 600px;
    margin: 20px 10px;
    background-color: #FFFFFF;
    box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.2);
}

h1 {
    font-size: 90px;
    color: rgba(175, 47, 47, 0.15);
    text-align: center;
    margin: 40px auto;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
</style>
